import React, { Component } from "react";
import { Toast, Tabs } from "antd-mobile";
import "./xhdPayBackHome.scss";
import { connect } from "react-redux";
import { InterfaceG } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import MainLayout from "../../../component/mainLayout/mainLayout";
import NewXhdPayBackList from "../newXhdPayBackList/xhdPayBackList";
import NewXhdEarlyRepayment from "../newXhdEarlyRepayment/xhdEarlyRepayment";
const tabs = [{ title: "按期还款" }, { title: "结清还款" }];
class XhdPayBack extends Component {
	constructor(props) {
		super(props);
		this.state = {
			overDue: false,
			repayDate: "",
			days: "",
			datas: {},
			loanBtnText: "结清还款",
			btnText: "立即还款",
			tipText: "还剩4天",
			isOverdue: true,
			overdueText: "逾期4天",
			tabIndex: 0
		};
	}

	componentDidMount() {
		this.xhdGetRepayInfo();
	}

	//还款初始化接口
	xhdGetRepayInfo() {
		const _this = this;
		let objs = {
			url: InterfaceG.xhdGetRepayInfo,
			params: {
				lnid: this.props.getAppPlatformsDatas.lnid,
				applyNo: this.props.getAppPlatformsDatas.applyNo
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				Toast.hide();
				const data = res.data;
				_this.setState({
					datas: res.data,
					overDue: data.overDue,
					repayDate: data.repayDate,
					days: data.days,
					repayAmt: data.repayAmt
				});
			} else {
				Toast.hide();
				Toast.info(res.message, 2);
			}
		});
	}

	btnFn(type) {
		if (type == "curPay") {
			//立即还款
			this.jumpPage("xhdPayBackHome");
		} else {
			//结清还款
			this.jumpPage("xhdEarlyPay");
		}
	}

	//小辉付跳转不同首页
	jumpPage(url) {
		this.props.history.push({
			pathname: `/${url}`
		});
	}

	gotoxhdRecordList() {
		this.props.history.push("/loanAndPayDetail/1");
	}
	tabChange = (tab, index) => {
		this.setState({
			tabIndex: index
		});
	};
	render() {
		const { tabIndex } = this.state;
		let _pageParams = {
			header: {
				title: "小辉贷",
				goBackPath: "/xhdHome",
				rightButt: "借还记录",
				rightButtCallBack: this.gotoxhdRecordList.bind(this)
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="xhd-payBack-home">
					<Tabs tabs={tabs} initialPage={0} onTabClick={this.tabChange}>
						<div className="schedule"></div>
						<div className="schedule advance"></div>
					</Tabs>
					{tabIndex == 0 && <NewXhdPayBackList history={this.props.history} />}
					{tabIndex == 1 && (
						<NewXhdEarlyRepayment history={this.props.history} />
					)}
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const XhdPayBackPage = connect(mapStateToProps, mapDispatchToProps)(XhdPayBack);
export default XhdPayBackPage;
